開發的語言、框架不同，所以選用的插件也會有所落差，作為一個 web developer，我就以我的狀況向大家推薦幾款實用的插件吧！

gitgutter —— 顯示 git diff

Plug 'airblade/vim-gitgutter'

首先要來介紹一些 git 的插件，畢竟開發上十之八九都會用到 git。(是有聽說一些不用 git 的大神所以就沒說死 orz ...)

gitgutter 這款套件可以即時顯示你的檔案在當前的 repository 中的不同之處，共有幾種狀態：

1. + 表示新增的區塊
2. - 表示刪除的區塊
3. ~ 表示修改的區塊

而它也能設定更新的頻率

set updatetime=100

這樣代表：每 100 毫秒更新一次。

emmet —— HTML 提示工具

Plug 'mattn/emmet-vim'

只要有寫過 HTML 的開發者，就算不知道 emmet 是何方神聖，但肯定使用過它！
許多開發 web 的 IDE 都已經搭載了這套工具，因為它大大地促進了我們撰寫 HTML 的開發效率！

不過我不習慣它的 Leader Key，所以自己改成了：

let g:user_emmet_leader_key=','

使用 , 當作 Leader Key～

closetag —— HTML 標籤工具

Plug 'alvan/vim-closetag'

這款工具的用法就是當我們在打 HTML 的標籤時，打下結束標籤 > 的瞬間幫我們補齊後面的 close tag，而向是 input 與 br 這種不用對應的標籤則不會幫我們加。這跟昨天介紹的 auto-pairs 對我來說有相同的助益～

不過它預設只對 *.html 有作用，我寫 vue 或是做 SSR 時由 template 產生的怎麼辦？

只好逼它也對這些檔案產生作用了：

let g:closetag_filenames='*.html,*.vue,*.php'

css-color —— CSS 調色工具

Plug 'ap/vim-css-color'

以往我們在 vim 寫上色碼時還必須打開瀏覽器來檢視顏色，安裝完這個套件後就能將色碼直接顯示在文字的背景色，省去了切換視窗 + 重整的時間呢！(我就懶)

結論

好的我的工具大致上介紹完畢啦～在我的 IDE 中有些工具也不是必須 (可能只是看起來比較花俏一點)，大部分的工具使用起來都已經像個完整個 IDE 了，再加上它高度客製化的功能，真的會讓人入坑以後就無法自拔了！！！

介紹完我的 vim 後，我想之後會搭配一下非必要的工具 (單純只是我覺得很美～)，明天見掰掰！